<template>
	<view>
		<view class="all">
			<view class="content-one">
				<image src="../../static/gaoyuan.png" mode="" class="wenzi"></image>
				<image src="../../static/Frame (11).png" mode="" class="motuo"></image>
				<component-test1 @goodNumInformation="goodNumInformation" @allPrice="allPrice"></component-test1>
				<view class="chosen">
					<view class="choice-img" @tap="openorder" type="dialog">
						<image src="../../static/xianxinshunfengkuaidi.png" mode=""></image>
					</view>
					<view class="choice-num">
						<text>{{totals}}</text>
					</view>
					<view class="choice-price">
						￥{{getAllPrice}}
					</view>
					<view class="choice-detail">
						打包带走
					</view>
					<view class="choiced" @click="goConfirmOrder">
						选好了
					</view>
					<view class="other">
						other
					</view>

				</view>
			</view>
		</view>
		<view class="dialog">
			<!-- #ifdef MP-WEIXIN -->
			<!-- <page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta> -->
			<!-- #endif -->
			<uni-popup ref="popup">
				<view class="dialog-box">
					<!-- 头部 -->
					<view class="fade-away">
						<view class="fade-num">
							数量:
						</view>
						<view class="fade-font">
							{{goodsNum.num}}
						</view>
						<view class="fade-daizi-one">
							口袋1
							<!-- {{goodsNum[0].name}} -->
						</view>
						<view class="fade-num-one">
							$25.5
						</view>
					</view>
					<scroll-view scroll-y="true" class="dialog-height">
						<view v-for="packages  in packageGoods" :key="packages.id">

							<view class="dialog-content-top">
								<view>
									<view class="quan" v-if="dianji">
										<image src="../../static/quan.png" mode="" @click="queding(index)"></image>

									</view>
									<view class="quan" v-else>
										<image src="../../static/isquan.png" mode="" @click="quedingtwo(index)"></image>
									</view>
								</view>
								<view class="dialog-wenzi">
									{{packages.name}}
								</view>
								<text>({{packages.goodsNum}})</text>
								<view class="dabao">
									打包费
									<text>￥1</text>
								</view>
								<view class="delAll">
									清空这口袋
								</view>

							</view>

							<view class="nei-rong">
								<view v-for="(item, index) in packages.goods" :key="item.goodsId">
									<!-- <view v-for="(item, index) in csListArrl" :key="index" :data-index="index" class="order-item"
									@touchstart="drawStart" @touchmove="drawMove" @touchend="drawEnd" :style="'right:'+item.right+'px'"> -->
									<view class="content">
										<view class="rong-pic">
											<image src="../../static/Frame 25.png" mode=""></image>
										</view>
										<view class="right">
											<view class="jizhua">
												<text>{{item.goodsName}}</text>
											</view>
											<view class="fuhao">
												￥
											</view>
											<view class="money">
												{{item.price}}
											</view>
											<view class="danjia">
												{{item.weight}}
											</view>


											<view class="jiasuan">
												<view class="add" @tap="add(index)"></view>
												<text class="num">{{item.num}}</text>
												<view class="sub" @click="sub(index)"></view>
											</view>
										</view>>



									</view>
									<view class="remove" @click="delData(item)">删 除</view>

								</view>

							</view>




						</view>
					</scroll-view>

					<!-- //底部选好了 -->
					<view class="chosen" @click="close">
						<view class="choice-img">
							<image src="../../static/xianxinshunfengkuaidi.png" mode=""></image>
						</view>
						<view class="choice-num">
							<text>16</text>
						</view>
						<view class="choice-price">
							￥32.5
						</view>
						<view class="choice-detail">
							打包带走
						</view>
						<view class="choiced" @click="goConfirmOrder">
							选好了
						</view>
						<view class="other">
							other
						</view>

					</view>
				</view>
			</uni-popup>
		</view>
	</view>
	</view>
</template>

<script>
	import ComponentTest1 from '@/components/ComponentTest1.vue'
	import {
		getAddPocket
	} from "@/api/home.js"
	export default {
		components: {
			ComponentTest1,

		},
		onLoad(option) {

		},
		created() {
			// this.goodsListshow()
			this.goodNumInformation()
		},
		data() {
			return {
				dianji: true,
				//滑动
				csListArrl: [{
						jia: true,
						right: 0,
						left: 0,
						num: 0
					},
					{
						jia: true,
						right: 0,
						left: 0,
						num: 0
					}, {
						jia: true,
						right: 0,
						left: 0,
						num: 0
					}, {
						jia: true,
						right: 0,
						left: 0,
						num: 0
					}
				],
				//左滑默认宽度
				delBtnWidth: 122,
				//商品数量
				packageGoods: [],

				totals: '',
				getAllPrice: '',
			}

		},
		methods: {
			//获取价格
			allPrice(e) {
				this.getAllPrice = e
				console.log("框框", this.getAllPrice);
			},
			// 获取商品数量
			goodNumInformation(e) {
				// let a = {}
				// let b = {}
				
			
				this.packageGoods = e
					// console.log("dd", this.packageGoods)
					
				// e.map((item)=> {
				// 	a={...item}
				// 	// console.log('asda', item);
				// 	// item.goods.map(itemx=> {
				// 	// 	var b = a.push(itemx)
				// 	// })
				// 	// ...item.goods+
					
				// }),
				// console.log("ss",a);
				// console.log("sss",b);
				var total = 0
				var price = 0



				this.packageGoods.map(item => {
					let goodsNum = 0
					let goodsPrice = 0
					console.log("看看", item);
					item.goods.map(itemx => {
						total = total + itemx.num
						// goodsNum = goodsNum+ itemx.num
						// goodsPrice = goodsPrice + itemx.num*item.price
						price = price + itemx.num * Number(item.price)
					})

					item.goodsNum = total
					// item.goodsPrice = price
				})
				console.log("hh", total);
				this.totals = total
				// console.log("哈哈", price)

			},
			// goodsListshow(){
			// 	uni.getStorage({
			// 		key:"goodsListshow",success: (res) => {
			// 			console.log(res);
			// 		}
			// 	})
			// 	// console.log("fff",aaa);
			// 	uni.getStorage({
			// 		key:"totalAll"
			// 	})

			// },
			//去确认订单
			goConfirmOrder() {
				
				// getAddPocket({
				// 		order: {
				// 			allPrices: this.getAllPrice,
				// 			addressId: "",
				// 			orderType: "",
				// 			paymentMethod: "微信支付",
				// 			packingPrice: 1,
				// 			deliveryPrice:1
				// 		},
				// 		pockets: {

				// 			pocketGoods:this.packageGoods
				// 		},
				// 		goodsIds:""


				// 	}).then(res => {

				// 	}),
					uni.navigateTo({
						url: "/pages/ConfirmOrder/ConfirmOrder"
					})
			},
			//  //设置页面全屏
			// onShow() {
			//     plus.navigator.setFullscreen(true);
			// },
			// //如果不加这句，会导致跳转到别的页面后也是全屏
			// onHide() {
			//     plus.navigator.setFullscreen(false);
			// },
			// 加号
			addPic(index) {
				this.csListArrl[index].jia = false
				this.csListArrl[index].num++;
			},
			add(index) {
				this.csListArrl[index].num++;
			},
			sub(index) {
				if (this.csListArrl[index].num !== 0) {
					this.csListArrl[index].num--;
					if (this.csListArrl[index].num == 0) {
						this.csListArrl[index].jia = true
					}

				}
			},
			//确定
			queding(index) {
				console.log(222);
				this.dianji = false
			},
			quedingtwo(index) {
				this.dianji = true
			},
			//弹窗
			openorder() {
				this.$refs.popup.open("bottom");

			},
			close() {
				this.$refs.popup.close()

			},

			//左右滑动
			//开始触摸滑动
			drawStart(e) {
				console.log("开始触发");
				console.log(e);
				var touch = e.touches[0];
				this.startX = touch.clientX;
			},
			//触摸滑动
			drawMove(e) {
				console.log("滑动");
				for (var index in this.csListArrl) {
					this.$set(this.csListArrl[index], 'right', 0);

				}
				var touch = e.touches[0];
				var item = this.csListArrl[e.currentTarget.dataset.index];
				var disX = this.startX - touch.clientX;
				// console.log(disX);
				if (disX >= 40) {
					if (disX > this.delBtnWidth) {
						disX = this.delBtnWidth;
					}
					this.$set(this.csListArrl[e.currentTarget.dataset.index], 'right', disX);
				} else {
					this.$set(this.csListArrl[e.currentTarget.dataset.index], 'right', 0);
				}
			},
			//触摸滑动结束
			drawEnd(e) {
				console.log("滑动结束");
				var item = this.csListArrl[e.currentTarget.dataset.index];
				if (item.right >= this.delBtnWidth / 2) {
					this.$set(this.csListArrl[e.currentTarget.dataset.index], 'right', this.delBtnWidth);
				} else {
					this.$set(this.csListArrl[e.currentTarget.dataset.index], 'right', 0);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.all {
		width: 100%;
		background: #FA8C16;
	}

	.content-one {
		width: 100%;
		background: #FFFFFF;
		border-radius: 24px 24px 0px 0px;

		.wenzi {
			width: 576rpx;
			height: 72rpx;
			margin-top: 32rpx;
			margin-left: 32rpx;
		}

		.motuo {
			width: 88rpx;
			height: 88rpx;
			margin-left: 32rpx;
		}

		// 底部选好了

		.chosen {
			position: fixed;
			margin-left: 50%;
			transform: translateX(-50%);
			bottom: 50rpx;
			width: 686rpx;
			height: 116rpx;
			background: #FA8C16;
			border-radius: 88rpx;

			.choice-img {
				width: 88rpx;
				height: 88rpx;
				margin-top: 10rpx;
				margin-left: 20rpx;

				image {
					width: 88rpx;
					height: 88rpx;
					background-size: 100%;
				}
			}

			.choice-num {
				width: 32rpx;
				height: 32rpx;
				background-color: #000000;
				border-radius: 50%;
				margin-top: -80rpx;
				margin-left: 95rpx;

				text {
					display: block;
					width: 32rpx;
					height: 32rpx;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 20rpx;
					line-height: 32rpx;
					color: #FFFFFF;
				}
			}

			.choice-price {
				// width: 38px;
				height: 36rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 500;
				font-size: 36rpx;
				line-height: 36rpx;
				color: #FFFFFF;
				margin-top: -30rpx;
				margin-left: 130rpx;
			}

			.choice-detail {
				// width: 40px;
				height: 20rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 20rpx;
				line-height: 20rpx;
				color: #FFFFFF;
				margin-top: 10rpx;
				margin-left: 135rpx;

			}

			.choiced {
				width: 96rpx;
				height: 32rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 500;
				font-size: 32rpx;
				line-height: 32rpx;
				color: #FFFFFF;
				margin-top: -60rpx;
				margin-left: 550rpx;
			}

			.other {
				width: 54rpx;
				height: 20rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 20rpx;
				line-height: 20rpx;
				color: #FFFFFF;
				margin-top: 10rpx;
				margin-left: 560rpx;
			}

		}



	}


	.dialog-box {
		width: 750rpx;
		height: 900rpx;
		background: #FFFFFF;
		border-radius: 48rpx 48rpx 0px 0px;

		//逐渐变没
		.fade-away {
			margin-left: 50%;
			transform: translateX(-50%);
			top: 40rpx;
			width: 686rpx;
			height: 56rpx;
			background: #FCD198;
			opacity: 0.9;
			border-radius: 82rpx;
			display: flex;

			.fade-num {
				width: 80rpx;
				height: 24rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 800;
				font-size: 24rpx;
				line-height: 24rpx;
				color: #121B36;
				margin-top: 18rpx;
				margin-left: 30rpx;
			}

			.fade-font {
				width: 50rpx;
				height: 24rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 800;
				font-size: 24rpx;
				line-height: 24rpx;
				color: #121B36;
				margin-top: 18rpx;
				margin-left: 10rpx;
			}

			.fade-daizi-one {
				width: 80rpx;
				height: 24rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 800;
				font-size: 24rpx;
				line-height: 24rpx;
				color: #121B36;
				margin-top: 18rpx;
				margin-left: 10rpx;
			}

			.fade-daizi-two {
				width: 80rpx;
				height: 24rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 800;
				font-size: 24rpx;
				line-height: 24rpx;
				color: #121B36;
				margin-top: 18rpx;
				margin-left: 10rpx;
			}

			.fade-num-one {
				width: 80rpx;
				height: 24rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 800;
				font-size: 24rpx;
				line-height: 24rpx;
				color: #121B36;
				margin-top: 18rpx;
				margin-left: 10rpx;
			}

			.fade-num-two {
				width: 80rpx;
				height: 24rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 800;
				font-size: 24rpx;
				line-height: 24rpx;
				color: #121B36;
				margin-top: 18rpx;
				margin-left: 10rpx;
			}
		}



		//内容
		.dialog-height {
			width: 750rpx;
			height: 900rpx;

			.nei-rong {
				width: 100%;
				height: 100%;
				// background-color: rosybrown;

				//移动

				.order-item {
					width: 100%;
					border-radius: 0rpx 0rpx 0px 0px;
					display: flex;
					position: relative;
					margin: auto;
					align-items: right;
					flex-direction: row;
				}

				.content {
					width: calc(100% - 64rpx);
					height: 172rpx;
					margin: 0 auto;
					display: flex;
					justify-content: space-between;

					.rong-pic {
						width: 140rpx;
						height: 140rpx;
						margin-left: 40rpx;
						margin-top: 32rpx;

						image {
							width: 140rpx;
							height: 140rpx;
							background-size: 100%;
						}

					}

					.right {
						width: calc(100% - 172rpx);
						margin-left: 32rpx;
						border-bottom: 1px solid #ccc;
						display: flex;

						.jizhua {
							width: 112rpx;
							height: 28rpx;
							font-family: 'PingFang SC';
							font-style: normal;
							font-weight: 1000;
							font-size: 28rpx;
							line-height: 28rpx;
							color: #000000;
							margin-top: 32rpx;
							margin-left: 40rpx;
						}

						.fuhao {
							width: 17rpx;
							height: 22rpx;
							color: #FA8C16;
							font-size: 28rpx;
							line-height: 22rpx;
							margin-top: 70rpx;
							margin-left: -115rpx;
						}

						.money {
							width: 58rpx;
							height: 40rpx;
							font-style: normal;
							font-weight: 500;
							font-size: 40rpx;
							line-height: 40rpx;
							color: #FA8C16;
							margin-top: 70rpx;
							margin-left: 20rpx;
						}

						.danjia {
							width: 66rpx;
							height: 20rpx;
							font-family: 'PingFang SC';
							font-style: normal;
							font-weight: 400;
							font-size: 20rpx;
							line-height: 20rpx;
							color: #BFBFBF;
							margin-top: 38rpx;
							margin-left: 40rpx;
						}

						// .add-pic {
						// 	width: 70rpx;
						// 	height: 70rpx;
						// 	background-image: url("@/static/Frame (7).png");
						// 	position: absolute;
						// 	top: 100rpx;
						// 	left: 580rpx;
						// }

						.jiasuan {
							display: flex;
							width: 190rpx;
							height: 50rpx;
							// border: 1px solid #D9D9D9;
							border-radius: 35px;
							margin-top: 60rpx;
							margin-left: 100rpx;


						}

						.add {
							margin-left: 20rpx;
							margin-top: 3rpx;
							width: 48rpx;
							height: 48rpx;
							background-image: url("@/static/Frame (8).png");
							background-size: 100%;


						}

						.num {

							width: 22rpx;
							height: 36rpx;
							font-family: 'PingFang SC';
							font-style: normal;
							font-weight: 500;
							font-size: 36rpx;
							line-height: 36rpx;
							color: #FA8C16;
							margin-top: 6rpx;
							margin-left: 20rpx;


						}

						.sub {

							width: 48rpx;
							height: 48rpx;
							background-image: url("@/static/Frame (9).png");
							background-size: 100%;
							margin-top: 3rpx;
							margin-left: 20rpx;

						}


					}

				}

				.remove {

					width: 244rpx;
					height: 100%;
					background-color: #0862B5;
					color: #FFFFFF;
					position: absolute;
					top: 0;
					right: -244rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 36rpx;
				}






			}
		}



		//情况口袋
		.dialog-content-top {
			width: calc(100% - 64rpx);
			margin: 32rpx auto;
			z-index: 50;
			height: 32rpx;
			display: flex;
			justify-content: flex-start;

			.quan {
				width: 62rpx;
				height: 32rpx;
				margin-left: 50rpx;
				margin-top: -10rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					background-size: 100%;
				}
			}

			.dialog-wenzi {
				width: 39px;
				height: 32rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 800;
				font-size: 32rpx;
				line-height: 32rpx;
				color: #121B36;
			}

			text {
				width: 20rpx;
				height: 32rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 800;
				font-size: 32rpx;
				line-height: 32rpx;
				color: #121B36;
			}

			.dabao {
				width: 150rpx;
				height: 32rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 800;
				font-size: 32rpx;
				line-height: 32rpx;
				color: #121B36;
				margin-left: 50rpx;

				text {
					color: #FA8C16;
				}
			}

			.delAll {
				width: 120rpx;
				height: 32rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 24rpx;
				line-height: 32rpx;
				margin-left: 120rpx;
				color: #BFBFBF;

			}
		}



		// 底部选好了

		.chosen {
			position: fixed;
			margin-left: 50%;
			transform: translateX(-50%);
			bottom: 50rpx;
			width: 686rpx;
			height: 116rpx;
			background: #FA8C16;
			border-radius: 88rpx;

			.choice-img {
				width: 88rpx;
				height: 88rpx;
				margin-top: 10rpx;
				margin-left: 20rpx;

				image {
					width: 88rpx;
					height: 88rpx;
					background-size: 100%;
				}
			}

			.choice-num {
				width: 32rpx;
				height: 32rpx;
				background-color: #000000;
				border-radius: 50%;
				margin-top: -80rpx;
				margin-left: 95rpx;

				text {
					display: block;
					width: 32rpx;
					height: 32rpx;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 20rpx;
					line-height: 32rpx;
					color: #FFFFFF;
				}
			}

			.choice-price {
				// width: 38px;
				height: 36rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 500;
				font-size: 36rpx;
				line-height: 36rpx;
				color: #FFFFFF;
				margin-top: -30rpx;
				margin-left: 130rpx;
			}

			.choice-detail {
				// width: 40px;
				height: 20rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 20rpx;
				line-height: 20rpx;
				color: #FFFFFF;
				margin-top: 10rpx;
				margin-left: 135rpx;

			}

			.choiced {
				width: 96rpx;
				height: 32rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 500;
				font-size: 32rpx;
				line-height: 32rpx;
				color: #FFFFFF;
				margin-top: -60rpx;
				margin-left: 550rpx;
			}

			.other {
				width: 54rpx;
				height: 20rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 20rpx;
				line-height: 20rpx;
				color: #FFFFFF;
				margin-top: 10rpx;
				margin-left: 560rpx;
			}

		}
	}
</style>
